<template>
  <el-dialog title="在线学生" :close-on-click-modal="false" :destroy-on-close="true" width="800px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-diglogBox">
      <div class="online-diglogCon">
        <div class="online-dialogTitle">{{info.lessonProject}}</div>
        <div class="online-item">主讲：{{info.speaker}}</div>
        <div class="online-item">时间：{{info.startTime}} - {{info.endTime}}</div>
        <el-radio-group v-model="radio" style="width: 100%;" @change="handleRadio">
          <!--<el-radio :label="0" border>商务英语1班</el-radio>-->
          <el-radio :label="index" border v-for="(item, index) in list" :key="index">{{item.className}}</el-radio>
        </el-radio-group>
      </div>
      <div class="online-diglogCon">
        <div class="online-dialogTitle">在线用户列表</div>
        <div class="online-studentBox">
          <!--<div class="online-stu">-->
            <!--<i class="el-icon-success"></i>-->
            <!--<img class="online-studentLogo" src="@/assets/images/teacher.png"/>-->
            <!--<div class="online-studentName">Jack</div>-->
          <!--</div>-->
          <div class="online-stu" v-for="(item, index) in stuList" :key="index">
            <i class="el-icon-success"></i>
            <img class="online-studentLogo" :src="item.headImgUrl"/>
            <div class="online-studentName">{{item.userName}}</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { onlineLessonStuList } from '@/api/teacher/onlineCourse'
export default {
  props: ['id', 'info'],
  data () {
    return {
      isShow: true,
      list: [],
      stuList: [],
      radio: 0
    }
  },
  methods: {
    async onlineLessonStuList () {
      const res = await onlineLessonStuList({ onlineLessonId: this.id })
      if (res.code === '200') {
        this.list = res.data.classList
        if (this.list.length > 0) {
          this.stuList = this.list[0].stuList
        }
      }
    },
    // 切换班级显示不同在线学生
    handleRadio () {
      this.stuList = this.list[this.radio].stuList || []
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.onlineLessonStuList()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .el-radio{
    display: block;
    margin-right: 0;
    margin-top: 10px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0;
  }
</style>
